import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';

<div className="doc lead">
  A horizontal list
</div>

## Base
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list')}
</CodeView>

## Examples

### Links
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-links')}
</CodeView>

### Block Links
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-block-links')}
</CodeView>

### Block Links with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-block-links-space')}
</CodeView>

### Inline Block Links
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-inline-block-links')}
</CodeView>

### Inline Block Links with Space
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-inline-block-links-space')}
</CodeView>

### Left
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-left')}
</CodeView>

### Left with Link
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-link-left')}
</CodeView>

### Left with Link Space
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-link-space-left')}
</CodeView>

### Right
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-right')}
</CodeView>

### Right with Link
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-link-right')}
</CodeView>

### Right with Link Space
<CodeView>
  {getDisplayElementById(Base.examples, 'horizontal-list-link-space-right')}
</CodeView>
